<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html class="no-js" lang="en">
<head>

    <jsp:include page="../commons/top.jsp"/>
    <title>${goods.goodsName}</title>

</head>
<body>

<!--头部区域开始-->
<jsp:include page="../commons/head.jsp"/>
<!--头部区域结束-->

<!--导航区域开始-->
<div class="breadcrumbs_area">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb_content">
                    <ul>
                        <li><a href="${pageContext.servletContext.contextPath}/">首页</a></li>
                        <li>产品详细信息</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--导航区域结束-->

<div class="product_page_bg">
    <div class="container">
        <div class="product_details_wrapper mb-55">
            <!--产品细节开始-->
            <div class="product_details">
                <div class="row">
                    <div class="col-lg-5 col-md-6">
                        <div class="product-details-tab">
                            <div id="img-1" class="zoomWrapper single-zoom">
                                <a href="#">
                                    <img id="zoom1" src="${pageContext.servletContext.contextPath}/images/${goods.image1}" data-zoom-image="${pageContext.servletContext.contextPath}/images/${goods.image1}" alt="big-1">
                                </a>
                            </div>
                            <div class="single-zoom-thumb">
                                <ul class="s-tab-zoom owl-carousel single-product-active" id="gallery_01">
                                    <li>
                                        <a href="#" class="elevatezoom-gallery active" data-update="" data-image="$${pageContext.servletContext.contextPath}/images/${goods.image2}" data-zoom-image="${pageContext.servletContext.contextPath}/images/${goods.image2}">
                                            <img src="${pageContext.servletContext.contextPath}/images/${goods.image2}" alt="zo-th-1"/>
                                        </a>

                                    </li>
                                    <li >
                                        <a href="#" class="elevatezoom-gallery active" data-update="" data-image="${pageContext.servletContext.contextPath}/images/${goods.image3}" data-zoom-image="${pageContext.servletContext.contextPath}/images/${goods.image3}">
                                            <img src="${pageContext.servletContext.contextPath}/images/${goods.image3}" alt="zo-th-1"/>
                                        </a>

                                    </li>
                                    <li >
                                        <a href="#" class="elevatezoom-gallery active" data-update="" data-image="${pageContext.servletContext.contextPath}/images/${goods.image4}" data-zoom-image="${pageContext.servletContext.contextPath}/images/${goods.image4}">
                                            <img src="${pageContext.servletContext.contextPath}/images/${goods.image4}" alt="zo-th-1"/>
                                        </a>

                                    </li>
                                    <li >
                                        <a href="#" class="elevatezoom-gallery active" data-update="" data-image="${pageContext.servletContext.contextPath}/images/${goods.image5}" data-zoom-image="${pageContext.servletContext.contextPath}/images/${goods.image5}">
                                            <img src="${pageContext.servletContext.contextPath}/images/${goods.image5}" alt="zo-th-1"/>
                                        </a>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-6">
                        <div class="product_d_right">
                            <c:forEach var="sList" items="${goods.specs}">
                                <form action="#">

                                    <h3>${sList.gName}</h3>
                                    <div class="product_nav">
                                    </div>
                                    <div class="product_rating">
                                    </div>
                                    <div class="price_box">
                                        <span class="current_price">￥${sList.specsPrice}</span>
                                    </div>
                                    <div class="product_desc">
                                        <p>${goods.describe}</p>
                                    </div>
                                    <div class="product_variant">
                                        <h3>可用选择</h3>
                                        <label>版本</label>
                                        <ul>
                                            <c:forEach var="specsList" items="${specsList}">
                                                <li class="specifications <c:if test='${sList.specsName == specsList.specsName }'>specificationsred</c:if>"><a href="${pageContext.servletContext.contextPath}/index/system_detailed/${goods.goodsId}?goodsSpecs=${specsList.goodsSpecs}">${specsList.specsName}</a></li>
                                            </c:forEach>
                                        </ul>
                                    </div>
                                    <div class="product_variant quantity" style="margin-top: 20px">
                                        <label>数量</label>
                                        <input min="1" max="${sList.specsStock}" value="1" type="number">
                                        <button class="button" type="submit">添加到购物车</button>

                                    </div>
                                    <div class="product_timing">
                                        <div data-countdown="${goods.discountsdate}"></div>
                                    </div>
                                    <div class=" product_d_action">
                                        <ul>
                                            <li><a href="#" title="Add to wishlist">+ 添加到收藏</a></li>
                                        </ul>
                                    </div>
                                    <div class="product_meta">
                                        <span>分类: <a href="${pageContext.servletContext.contextPath}/index/list?id=${cate1.cateId}" target="_blank">${cate1.cateName}</a>&nbsp;&nbsp;—&gt;<a href="${pageContext.servletContext.contextPath}/index/list?id=${cate2.cateId}" target="_blank">${cate2.cateName}</a></span>
                                    </div>

                                </form>
                            </c:forEach>

                        </div>
                    </div>
                </div>
            </div>
            <!--产品详细信息结束-->

            <!--产品信息开始-->
            <div class="product_d_info">
                <div class="row">
                    <div class="col-12" style="padding-bottom: 50px">
                        <div class="product_d_inner">
                            <div class="product_info_button">
                                <ul class="nav" role="tablist">
                                    <li >
                                        <a class="active" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="false">商品介绍</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="#sheet" role="tab" aria-controls="sheet" aria-selected="false">详述</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">评论 (${count})</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="info" role="tabpanel" >
                                    <div class="product_info_content">
                                        <ul>
                                            <c:forEach var="intro" items="${inttoString}">
                                                <li class="intro-li">${intro}</li>

                                            </c:forEach>
                                        </ul>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="sheet" role="tabpanel" >
                                    <div class="product_d_table">
                                        <form action="#">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="first_child">配置</td>
                                                    <td>天仙配</td>
                                                </tr>
                                                <tr>
                                                    <td class="first_child">款式</td>
                                                    <td>爆款</td>
                                                </tr>
                                                <tr>
                                                    <td class="first_child">处理器</td>
                                                    <td>处理器基准频率:2.60 GHz</td>
                                                    <td>处理器型号:i7-10750H</td>
                                                    <td>核心:六核</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </form>
                                    </div>
                                    <div class="product_info_content">
                                        <p>包装清单 &nbsp;&nbsp;&nbsp; 笔记本电脑（内置电池）、适配器、电源线、说明书（电子版） 备注：笔记本电脑的背面只会标注此电脑的系列，例如：ALIENWARE 15 R3</p>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="reviews" role="tabpanel" >
                                    <c:forEach var="commentList" items="${commentsList}">
                                        <div class="reviews_wrapper">
                                            <h2>来自${commentList.memberName}的1条评论</h2>
                                            <div class="reviews_comment_box">
                                                <div class="comment_thmb" style="width: 60px">
                                                    <img src="${pageContext.request.contextPath}/images/${commentList.memberPortrait}" alt="">
                                                </div>
                                                <div class="comment_text">
                                                    <div class="reviews_meta">
                                                        <div class="product_rating">
                                                        </div>
                                                        <p><strong>${commentList.memberName} </strong><span>${commentList.commentTime}</span></p>
                                                        <span>${commentList.commentContent}</span>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--产品信息结束-->
        </div>
    </div>
</div>

<!--footer area start-->
<jsp:include page="../commons/bottom.jsp"/>
<!--footer area end-->

</body>
</html>
